<template>
  <div class="home-nav">
    <v-row no-gutters>
      <v-col v-for="item in links" :key="item.text">
        <div class="nav-link">
          <v-icon>{{ 'mdi-' + item.icon }}</v-icon>
          <span>{{ item.text }}</span>
        </div>
      </v-col>
    </v-row>
    <div class="ad-bar">
      <v-icon color="#FC4024">mdi-volume-high</v-icon>
      <span class="ml-4">自营家电清洗服务上线</span>
      <v-spacer></v-spacer>
      <v-btn x-small="" outlined color="#2AB795">详情</v-btn>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        {
          icon: 'comment-processing-outline',
          text: '话题'
        },
        {
          icon: 'flower-tulip-outline',
          text: '优选'
        },
        {
          icon: 'gift-outline',
          text: '特惠'
        },
        {
          icon: 'star',
          text: '签到'
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.nav-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70px;
  border-bottom: 1px solid #b0b0b0;
  i {
    font-size: 32px;
    color: #fd994b;
  }
  span {
    font-size: 13px;
  }
}
.ad-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  font-size: 13px;
  padding: 0 20px;
}
</style>
